import React, { Component } from 'react'
import './list.css'
/* 
jsx语法:js+xml(html) + css混合语法
浏览器不能识别 jsx, jsx会通过babel工具转义为js语法(js对象===虚拟dom)
jsx语法规范:
（1）只能有一个根元素    
（2）使用{}书写js表达式
（3）循环数组，需要key值
（4）给jsx设置样式 class写成className ，style={对象}
（5）label中的for要写成htmlFor
（6）使用标签要有闭合 
（7） 换行使用()括起来
*/
let x = 1000
let fn = () => {
    console.log(100);
    return 100
}
export default class List extends Component {

    state = {
        m: 200,
        n: 100,
        datalist: [1, 2, 3],
        datalistobj: [
            { id: 1, title: '凉皮', price: 10 },
            { id: 2, title: '肉夹馍', price: 8 },
        ]
    }
    render() {
        return (
            <div className='box' 
            style={{color:"red",border:'1px solid red',fontSize:'25px'}}>
                <label htmlFor="my">用户名</label>
                <input id='my'/>
                <h3>我是个list组件</h3>
                {this.state.n}
                <p>{this.state.m}</p>
                <p>{x}</p>
                <p>{fn()}</p>
                <p>{(10).toFixed(2)}</p>
                <p>{this.state.n > 100 ? '大于' : '小于等于'}</p>
                <div>{this.state.datalist}</div>
                <div>
                    {this.state.datalistobj.map((item, index) => {
                        return <li key={index}>
                            <span>名称:{item.title}</span>
                            <span>价格:￥{item.price}</span>
                        </li>
                    })}
                </div>
            </div>
        )
    }
}
